<template>
  <div v-loading="isLoading" class="list-table" style="height: 98%;border-bottom: 1px solid #dfe6ec;">
    <div id="d-scroll" class="infinite-list-wrapper infiniteActTask">
      <ul
        v-infinite-scroll="load"
        class="list"
        :infinite-scroll-disabled="disabled"
      >
        <li v-for="(item, index) in List" :key="index" class="list-item">
          <span class="border" style="display:none;" />
          <span v-if="item.status === 'N'" class="noRead" />
          <el-link type="primary" @click="updateHandle(item)">{{ item.title }}</el-link>
        </li>
      </ul>
      <p>{{ loadTit }}</p>
      <div v-if="emptyIcon" class="noneData" style="height: auto;">
        <div>
          <svg-icon icon-class="none" class-name="none-icon" />
          <p>{{ $t('暂无数据') }}</p>
        </div>
      </div>
    </div>

    <!-- 添加或修改系统消息对话框 -->
    <el-dialog v-if="formOpen" :title="title" :visible.sync="formOpen" :close-on-click-modal="false" :lock-scroll="false" custom-class="msgDialogButton" append-to-body>
      <msgBaseForm ref="msgBaseForm" />
    </el-dialog>

    <el-dialog v-if="otherOpen" :title="title" :visible.sync="otherOpen" :close-on-click-modal="false" :lock-scroll="false" custom-class="msgDialog" append-to-body>
      <component :is="formPath" ref="formPath" />
    </el-dialog>
  </div>
</template>

<script>
import { listMsgBase } from '@/api/system/message/msgBase'
import msgBaseForm from '../msgBaseForm.vue'
import { getAsyncComponent } from '@/utils'
export default {
  components: {
    msgBaseForm
  },
  data() {
    return {
      isLoading: true,
      loading: false,
      emptyIcon: false,
      List: [],
      // 总条数
      total: 0,
      // 弹出层标题
      title: '',
      // 是否显示弹出层
      otherOpen: false,
      formOpen: false,
      // 已读未读字典
      isReadOptions: [],
      formPath: '',
      // 查询参数
      queryParams: {
        userId: undefined,
        title: undefined,
        content: undefined,
        status: undefined,
        component: undefined,
        dataId: undefined,
        pageNum: 0,
        pageSize: 30
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {},
      loadTit: this.$t('加载中...')
    }
  },
  computed: {
    disabled() {
      return this.loading
    }
  },
  watch: {
    List: {
      handler(val) {
        if (val === [] || val.length === 0) {
          this.loading = true
          this.$emit('childHeight', 0)
        } else {
          this.$emit('childHeight', val.length * 36)
        }
      },
      deep: true
    }
  },
  created() {
    this.getDicts('is_read').then(response => {
      this.isReadOptions = response.data
    })
  },
  methods: {
    load() {
      this.queryParams.pageNum++
      this.getList(true)
    },
    /** 查询待办列表 */
    getList(flag) {
      this.isLoading = true
       this.emptyIcon = false
      this.loadTit = this.$t('加载中...')
      listMsgBase(this.queryParams).then(response => {
        if (response.code === 200 && flag) {
          this.List = this.List.concat(response.rows)
          // 多次加载数据
          if (this.List.length >= response.total && response.total !== 0) {
             this.loadTit = this.$t('没有更多了')
             this.loading = true
          }
          if (response.total === 0) {
            this.loadTit = ''
            this.emptyIcon = true
            this.isLoading = false
          }
          this.isLoading = false
        } else {
          // 第一次加载
          this.List = response.rows
          this.total = response.total
          this.isLoading = false
        }
      })
    },
    updateHandle(row) {
      this.title = row.title
      if (row.openComponent !== 'Y') {
        this.formOpen = true
        row.status = 'Y'
        this.$nextTick(() => {
          // 调用form页面的 init 方法初始化数据
          this.$refs.msgBaseForm.init(row)
        })
      } else {
        this.otherOpen = true
        this.formPath = getAsyncComponent(row.component)
        this.$bus.$on('async_done', () => {
          this.$nextTick(() => {
            if (this.$refs.formPath?.init !== undefined) {
              this.$refs.formPath.init(row.dataId)
            }
          })
        })
      }
    }
  }
}
</script>
